
.navigation {
    position: fixed;
    top: 0px;
    background-color: white;
    /* background-color: #e4f3ff; */
    height: 45px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 40px;
    font-size: large;
    font-weight: 700;
}
.navigation1 {
    position: fixed;
    top: 0px;
    background-color: #e4f3ff;
    /* background-color: #e4f3ff; */
    height: 45px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 40px;
    font-size: large;
    font-weight: 700;
}

.logo_img {
    height: 35px;
}

.container_1 {
    margin-top: 45px;
    height: 600px;
    width: 100%;
    background-color: #e4f3ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title_box {
    height: 280px;
    width: 420px;
    /* background-color: plum; */
    margin-right: 50px;
}

.img_box {
    height: 460px;
    width: 640px;
    background-image: url("../img/index/banner.png");
    background-size: contain;
}

.title {
    font-size: 48px;
    font-weight: 700;
}

.info {
    margin-top: 20px;
    color: #495366;
    font-weight: 200;
}

.to_login_btn {
    width: 180px;
    height: 50px;
    border: 0px;
    background-color: #06a7ff;
    border-radius: 25px;
    color: white;
    margin-top: 30px;
    font-size: large;
}

.to_login_btn:hover {
    background-color: #38b9ff;
    cursor: pointer;
}

.container_2 {
    height: 600px;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.title_1 {
    font-size: 50px;
    font-weight: 700;
}

.subtitle_1 {
    font-size: 42px;
    font-weight: 200;
    color: #495366;
}

.black_title_1 {
    font-size: 30px;
    /* font-weight: 700; */
}

.img_box_1 {
    height: 350px;
    width: 460px;
}

.gray_title_1 {
    font-size: 23px;
    font-weight: 200;
    color: #495366;
    margin-top: 18px;
}

.title_box_1 {
    height: 350px;
    width: 1000px;
    /* width: 420px; */
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.title_box_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 500px;
    margin-right: 50px;
}
/* element-plus */
.el-carousel__button{
    background-color: #06a7ff;
}
.el-carousel__button{
    height: 20px;
    width: 5px;
    /* background-color: #06a7ff; */
}
.footer{
    height: 100px;
    width: 100%;
    background-color: #f2f7ff;
    display:flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
}
.friendship{
    width: 600px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-evenly;
    font-size: 12px;
    color: #606266;
}
.vline{
    width: 1px;
    background-color: #c0c4cf;
}
.gray_span{
    color: #c0c4cf;
    font-size: 10px;
}

/* Dialog样式 */
.dialog{
    height: 400px;
}
.title-box {
    margin-top: 30px;
    height: 28px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.title {
    padding: 0 20px;

    font-size: x-large;
    border-right: 1px solid rgb(227, 229, 231);
}

.title:hover {
    color: rgb(50, 170, 255);
}



.input-box {
    height: 200px;
    width: 100%;
    /* background-color: plum; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.input1 {
    border: 1px solid rgb(227, 229, 231);
    width: 430px;
    height: 44px;
    padding: 10px;
    padding-left: 20px;
    border-bottom: 0px;
    border-radius: 10px 10px 0 0;
    /* font-size: x-large; */
}

.input2 {
    border: 1px solid rgb(227, 229, 231);
    width: 430px;
    height: 44px;
    padding: 10px;
    padding-left: 20px;
    border-radius: 0 0 10px 10px;
    display: flex;
    /* font-size: x-large; */
}

.regist {
    width: 200px;
    height: 40px;
    border: 1px solid rgb(227, 229, 231);
    background-color: white;
    border-radius: 7px;
    margin-right: 15px;
}

.login {
    width: 200px;
    height: 40px;
    border: 0px;
    background-color: rgb(38, 186, 239);
    border-radius: 7px;
    color: white;
    margin-left: 15px;
}

.acc-input,
.acc-input:focus-visible {
    margin-left: 15px;
    width: 80%;
    border-width: 0px;
    outline: none;
}

.pwd-input,
.pwd-input:focus-visible {
    margin-left: 15px;
    width: 57%;
    border-width: 0px;
    outline: none;
}

.form-btn {
    margin: 0 auto;
    /* background-color: wheat; */
    width: 76%;
    display: flex;
    justify-content: center;
}

.pwd-img {
    background-image: url("@/assets/img/index/eye_close_gray.png");
    width: 25px;
    height: 25px;
    margin-left: 50px;
    margin-right: 10px;
    background-size: cover;
    display: inline-block;
}
.pwd-img:hover{
    background-image: url("@/assets/img/index/eye_close_blue.png");
}

.pwd-img-sel{
    background-image: url("@/assets/img/index/eye_open_gray.png");
    width: 25px;
    height: 25px;
    margin-right: 10px;
    margin-left: 50px;
    background-size: cover;
    display: inline-block;
}
.pwd-img-sel:hover{
    background-image: url("@/assets/img/index/eye_open_blue.png");
}


.title-class-selected,
.title-class-selected:active,
.title-class-selected:focus,
.title-class-selected:hover {
    color: rgb(50, 170, 255);
    text-decoration: none;
    pointer-events: none;
    cursor: not-allowed;

}

.title-class,
.title-class:active,
.title-class:focus,
.title-class:hover {
    color: black;
    text-decoration: none;
    
}

.phone-input,
.phone-input:focus-visible {
    margin-left: 15px;
    width: 50%;
    border-width: 0px;
    outline: none;
}

.code,
.code:active,
.code:focus,
.code:hover {
    color: rgb(50, 170, 255);
    text-decoration: none;
    padding: 6px;
    padding-left: 35px;
    border-left: 1px solid rgb(227, 229, 231);
}

.code-disabled{
    pointer-events: none;
    cursor: not-allowed;
    padding: 6px;
    padding-left: 35px;
    border-left: 1px solid rgb(227, 229, 231);
    color: rgb(192, 192, 192);
}

.hide{
    display: none;
}

.hide-fake{
    visibility: hidden;
}

.forget-btn,
.forget-btn:hover,
.forget-btn:active,
.forget-btn:focus{
    color: rgb(50, 170, 255);
    text-decoration: none;

}
.message{
    font-size: medium;
    color: red;
    
}